import { useTranslation } from 'react-i18next';
import { useEffect, useState } from 'react';
import { Modal } from 'antd';
import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import styles from "./index.module.scss";
import image1 from './assets/image_1.png';
import image2 from './assets/image_2.png';
import image3 from './assets/image_3.png';
import image4 from './assets/image_4.png';
import image5 from './assets/image_5.png';


export default function Frame() {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);

  useEffect(
    () => {
      window.scrollTo(0, 0)
    },
    []
  );
  return (
    <div style={{ paddingTop: 47 }}>
      <Navigation />
      <div className={styles.page}>
        <div className={styles.wrap1}>
          <div className={styles.container}>
            <div className={styles.text}>
              <div className={styles.text__linebreak}>
                Color&nbsp;Vision&nbsp;Test
              </div>
              <div>{t('辨色测试标题')}</div>
            </div>
            <div className={styles.content}>
              <div className={styles.main} onClick={() => setOpen(true)}>
                <div className={styles.text1}>{t('立即测试')}</div>
                <img
                  src={image1}
                  className={styles.image3}
                />
              </div>
            </div>
            <div className={styles.text2}>
              <div className={styles.text2__linebreak}>
                <span className={styles.text2__seg0}>{t('光谱校准')}</span>
              </div>
              <div className={styles.text2__linebreak}>
                {t('调整设备亮度至提示标准（确保测试准确性）')}
              </div>
              <div className={styles.text2__linebreak}>&nbsp;</div>
              <div className={styles.text2__linebreak}>
                <span className={styles.text2__seg2}>{t('动态辨色')}</span>
              </div>
              <div className={styles.text2__linebreak}>
                {t('识别流动色块中的数字/图形（红绿/蓝黄专项检测）')}
              </div>
              <div className={styles.text2__linebreak}>&nbsp;</div>
              <div className={styles.text2__linebreak}>
                <span className={styles.text2__seg4}>{t('神经适应性评估')}</span>
              </div>
              <div>{t('通过快速闪烁色卡测试视觉皮质响应速度')}</div>
            </div>
          </div>
        </div>
        <div className={styles.wrap}>
          <img src={image2} className={styles.image} />
          <img src={image3} className={styles.image1} />
          <img src={image4} className={styles.image2} />
        </div>
      </div>
      <Footer />
      <Modal
        title={t('辨色测试')}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        footer={null}
      >
        <div style={{ textAlign: 'center' }}>
          <img
            style={{ width: '45%' }}
            src={image5}
          />
          <div>{t('扫描二维码开始测试')}</div>
        </div>
      </Modal>
    </div>
  );
}
